<!--
 * @Author: your name
 * @Date: 2021-06-16 09:49:25
 * @LastEditTime: 2021-06-18 16:28:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bazai_ebook\src\views\store\StoreShelf.vue
-->
<template>
  <div class="store-shelf">
    <shelf-title />
    <scroll
    class="store-shelf-scroll-wrapper"
    @onScroll="onScroll"
    ref="scroll"
    :bottom="scrollBottom"
    :top="0" >
      <shelf-search></shelf-search>
      <shelf-list></shelf-list>
    </scroll>
    <shelf-footer></shelf-footer>
  </div>
</template>

<script>
import { storeShelfMixin } from '@/mixins/mixin'
import ShelfFooter from '../../components/shelf/ShelfFooter.vue'
export default {
  components: { ShelfFooter },
  mixins: [storeShelfMixin],
  name: 'StoreShelf',
  data () {
    return {
      scrollBottom: 0
    }
  },
  watch: {
    isEditMode (isEditMode) {
      this.scrollBottom = isEditMode ? 48 : 0
      this.$refs.scroll.refresh()
    }
  },
  methods: {
    onScroll (offsetY) {
      this.setOffsetY(offsetY)
    }
  },
  mounted () {
    this.getShelfList()
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .store-shelf {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: white;
    .store-shelf-scroll-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 101;
    }
  }
</style>
